<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<style>
#term{
width:100%;
height:95%
}
#term2{
width:100%;
height:95%
}
</style>
<link rel="stylesheet" type="text/css" href="/static/css/jquery.terminal.css">
<script type="text/javascript" src="/static/commons/admin.js"></script>
<script type="text/javascript" src="/static/jquery/jquery.terminal.min.js"></script>
<script type="text/javascript" src="/static/jquery/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
var webSocket;
var tty;
/*
$(function() {
	$('#term').terminal(function(command, term){
		webSocket.send(command);
	},
	{
		greetings: '',
		name: '',
		//height: 400,
		prompt: '',
		onInit: function(term){
			tty = term;
		}
	});
});
*/
function connect(){
	if(webSocket){
		webSocket.close();
	}
	
	//var url = 'ws://' + window.location.host + ':7080' + ${contextRoot} + 'ws/term?' 
	var url = 'ws://' + window.location.host + ${contextRoot} + 'ws/term?' 
			+ 'host=' + $('#termHost').val()
			+ '&name=' + $('#termUserName').val() 
			+ '&password=' + $('#termPassword').val();
	console.log(url);
	
	webSocket = new WebSocket(url);
	
/*
	webSocket.onerror = function(event) {
		onError(event)
	};
*/
	webSocket.onopen = function(event) {
		//console.log("onopen->" + event.data);
	};
	webSocket.onmessage = function(event) {
		//console.log(event.data);
		/*
		tty.echo(event.data, {
			finalize: function(div){
				div
		         .css("width", "720px")
		         .css("text-align", "right")
		         .css("margin-top", "-1em");
			}
		});
		*/
		//tty.echo(event.data);
		//tty.set_prompt(event.data);
		//tty.echo('');
		//$('#term').click();
		//$('#term').click();
		$('#term2').val($('#term2').val() + event.data);
	};
/*
	function onMessage(event) {
		document.getElementById('messages').innerHTML 
			+= '<br />' + event.data;
	}

	function onOpen(event) {
		document.getElementById('messages').innerHTML 
			= 'Connection established';
	}

	function onError(event) {
		alert(event.data);
	}
*/
	
}

function disconnect(){
	console.log(tty.get_output());
	//tty.get_output() = 'haha';
}
</script>
<div style="padding:5px;height:auto">
	<select id="termHost">
		<option value="cndalwas03vl.cn.fid-intl.com" selected>WebX</option>
	</select>
	<input id="termUserName" type="text" value="" placeholder="用户名"/>
	<input id="termPassword" type="password" value="asket123" placeholder="密码">
	<a href="#" class="easyui-linkbutton" iconCls="icon-back" onclick="connect()">连接</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="disconnect()">断开</a>
</div>
<!-- <div id="term"></div> -->
<input id="cmd" type="text" onkeydown=""/>
<textarea id="term2" readonly onclick="$('#cmd').focus()"></textarea><br>